<template>
    <div class="box">
        <p class="title">
          我的留言管理中心
        </p> 
        <br>
        <button @click="handleEditStatus(true)">新增</button>
        <bo-list 
        :list='list' 
        :isMy='true'
        @handleForm='handleForm'
        @handleMsgStatus='handleMsgStatus'
        ></bo-list>

        <bo-edit-popup 
        :editStatus='editStatus' 
        :editForm='editForm'
        @handleEditStatus='handleEditStatus'
        @updateMessageboard='updateMessageboard'
        @addMessageboard='addMessageboard'
        ></bo-edit-popup>
        <bo-msg-popup 
        :msgStatus='msgStatus'
        @handleMsgStatus='handleMsgStatus'
        @sendRequest='sendRequest'
        ></bo-msg-popup>
    </div>
</template>

<script>
import BoList from '@/components/list'
import BoEditPopup from '@/components/editPopup'
import BoMsgPopup from '@/components/messagePopup'
import Api from '@/api/messageboard'
export default {
  name: 'HelloWorld',
  components:{
    BoList,
    BoEditPopup,
    BoMsgPopup
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list:[],
      editStatus:false,
      msgStatus:false,
      editForm:{}
    }
  },
  created(){
    this.getMyList()
  },
  methods:{
    getMyList(data){
        Api.getMyList(data).then(res=>{
            this.list = res.data
        })
    },
    handleEditStatus(flag){
      this.editForm = {}
      this.editStatus = flag
    },
    handleMsgStatus(data){
      
      if(typeof data==='object'){
        this.msgStatus = true
        this.editForm = data
      }
      this.msgStatus = data
      
    },
    handleForm(data){
      this.editForm = {}
      this.editStatus = true
      //因为在这里是浅复制，这样的话，当她点了确定，会立马更新试图，不合理，应该深复制，也就是点确定后并不能直接影响视图，而是等我们的后端传来结果后，在更新试图！
      this.editForm = JSON.stringify(data)
      this.editForm = JSON.parse(this.editForm);
    },
    updateMessageboard(data){
      Api.updateMessageboard(data).then(res => {
        if(res.status===200){
          this.editStatus = false
          this.editForm = {}
          return this.getMyList()
        }
      })
    },
    addMessageboard(data){
      Api.addMessageboard(data).then( res => {
        if(res.status===200){
          this.editStatus = false
          return this.getMyList()
        }
      })
    },
    //按下确定按钮发送请求。
    sendRequest(){
      Api.delMessageboard({id:this.editForm.id}).then( res => {
        if(res.status === 200){
          this.msgStatus = false
          return this.getMyList()
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .box
    width 1000px
    margin 0 auto
  p.title 
    text-align center
</style>
